<template>
  <div class="app-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar" style="margin-left: 20px;">
      <el-form :inline="true" :model="queryParams" ref="queryForm" class="demo-form-inline">
        <div style="display: flex; justify-content: space-between;">
          <el-form-item>
            <el-button v-if="hasPermission('travel:follow:add')" icon="el-icon-circle-plus-outline" size="large">
              写跟进
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin-right: 30px;" @click="handleBack" size="large">
              返回
            </el-button>
          </el-form-item>
        </div>
        <div class="custom-input-container">
          <el-input v-model="inputValue" placeholder="请输入内容" clearable type="textarea" :rows="3"
                    style="width: 100%; resize: none;"
          >
            <template #prefix>
              <i class="el-icon-edit-outline"
                 style="color: #409EFF; cursor: pointer; font-size: 20px; line-height: 26px;"
              ></i>
            </template>
          </el-input>
        </div>
        <br>
        <br>
        <el-form-item style="margin-left: 10px; display: flex; justify-content: flex-end;">
          <el-button :type="inputValue ? 'primary' : ''" :disabled="!inputValue" @click="handlePublish"
                     style="width: 100px; margin-right: 30px;" size="large"
          >
            发布
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!-- 时间线和空状态的外层容器 -->
      <div>
        <!-- 滚动容器（核心修改：添加滚动监听的容器） -->
        <div class="scroll-container" @scroll="handleScroll">
          <!-- 时间线区域 -->
          <el-timeline>
            <!-- 每条跟进记录（仅当前orderId） -->
            <el-timeline-item v-for="item in followList" :key="item.orderFollowId" placement="top"
                              style="margin-right: 38px;"
            >
              <div class="timeline-card">
                <!-- 头像/类型标识 -->
                <div class="item-avatar">
                  <el-avatar class="fullname-avatar" :style="{
                  backgroundColor: '#0000CD',
                  color: '#fff',
                  fontSize: '12px'
                }"
                  >
                    {{ item.createBy }}
                  </el-avatar>
                </div>
                <!-- 内容区域 -->
                <div class="item-content">
                  <div class="content-header">
                    <div class="flex justify-between items-center">
                      <span class="name font-bold">{{ item.createBy }}</span>
                    </div>
                  </div>
                  <div>
                    {{ formatDateTime(item.createTime) }}
                  </div>
                  <div class="content-desc mt-2 text-gray-700">
                    {{ item.orderFollowContent }}
                  </div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>

          <div v-if="followList.length === 0" class="empty-state">
            <el-empty description="暂无跟进记录"></el-empty>
          </div>

          <!-- 加载指示器（核心修改：滚动加载时显示） -->
          <div v-if="isLoading" class="loading-indicator">
            <!-- 蓝色转圈加载动画（Element UI内置） -->
            <el-spinner type="circle" color="#409EFF" size="24px"></el-spinner>
            <p style="color: #409EFF; margin-top: 8px;">加载中...</p>
          </div>
          <!-- 没有更多数据的提示（核心修改） -->
          <div v-if="!hasMore && followList.length > 0" class="no-more">
            已显示全部内容
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFollow, addFollow, listAllFollow } from '@/api/travel/follow'
import { getUserProfile } from '@/api/system/user'

export default {
  name: 'Follow',
  data() {
    return {
      // 跟进表格数据
      followList: [],
      // 输入的跟进内容
      inputValue: '',
      // 分页参数（核心修改）
      queryParams: {
        orderId: null,
        pageSize: 5, // 每页加载5条（可调整）
        pageNum: 1 // 当前页码，从1开始
      },
      // 加载状态（核心修改）
      isLoading: false, // 是否正在加载
      hasMore: true,// 是否还有更多数据可加载
      // 表单参数（关联当前订单）
      form: {
        orderId: null,
        orderFollowContent: null
      },
      // 加载状态
      loading: false,
      // 当前登录用户信息（仅用于发布时记录创建人）
      currentUserNick: null
    }
  },
  created() {
    this.initData()
  },
  /** 组件挂载时确保滚动容器正确 */
  mounted() {
    // 确保滚动容器高度足够，否则无法触发滚动
    const container = document.querySelector('.scroll-container');
    if (container) {
      container.style.maxHeight = 'calc(100vh - 300px)'; // 限制容器高度，超出可滚动
      container.style.overflowY = 'auto'; // 开启垂直滚动
    }
  },
  methods: {
    /** 初始化数据：获取orderId + 加载用户信息 + 加载跟进记录 */
    async initData() {
      // 1. 从路由参数获取orderId并校验
      const orderId = this.$route.query.orderId
      if (!orderId) {
        this.$message.error('请从订单页面进入跟进记录')
        this.handleBack() // 无订单ID时返回
        return
      }

      // 2. 保存订单ID
      this.queryParams.orderId = orderId
      this.form.orderId = orderId

      // 3. 获取当前用户信息（用于发布时的创建人）
      try {
        const userRes = await getUserProfile()
        this.currentUserNick = userRes.data.nickName
        console.log(userRes.data.nickName)

      } catch (error) {
        console.error('获取用户信息失败:', error)
      }

      // 4. 加载该订单的所有跟进记录
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 5; // 每页5条
      this.getList();
    },

    /** 查询跟进列表（仅通过orderId筛选） */
    /** （修改为分页加载） */
    getList() {
      if (!this.queryParams.orderId) {
        this.$message.warning('订单ID不存在，无法加载跟进记录');
        return;
      }

      // 显示加载状态（仅首次加载或刷新时）
      if (this.queryParams.pageNum === 1) {
        this.loading = true;
      }

      listAllFollow(this.queryParams).then(response => {
        const newData = response.data || [];
        // 第一页直接覆盖数据，后续页追加数据
        if (this.queryParams.pageNum === 1) {
          this.followList = newData;
        } else {
          this.followList = [...this.followList, ...newData];
        }
        // 判断是否还有更多数据（当前页数据量 < 页大小，说明已加载完）
        this.hasMore = newData.length >= this.queryParams.pageSize;
        // 关闭加载状态
        this.loading = false;
        this.isLoading = false;
      }).catch(error => {
        console.error("获取跟进列表失败:", error);
        this.$message.error("获取跟进记录失败，请重试");
        this.loading = false;
        this.isLoading = false;
      });
    },
    /** 滚动监听函数（核心新增） */
    handleScroll(e) {
      // 避免在加载中或无更多数据时触发
      if (this.isLoading || !this.hasMore) return;

      const container = e.target;
      // 计算滚动到底部的距离（可视区域高度 + 滚动距离 >= 内容总高度 - 触发阈值）
      const scrollBottom = container.scrollHeight - container.clientHeight - container.scrollTop;
      // 当距离底部小于200px时触发加载
      if (scrollBottom < 200) {
        this.loadMore();
      }
    },

    /** 加载更多数据（核心新增） */
    loadMore() {
      this.isLoading = true; // 显示加载动画
      this.queryParams.pageNum += 1; // 页码+1
      this.getList(); // 调用接口加载下一页
    },
    /** 格式化日期时间 */
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      }).replace(/\//g, '-')
    },

    /** 发布跟进内容（关联当前订单和用户） */
    async handlePublish() {
      if (!this.inputValue.trim()) {
        this.$message.warning('请输入内容后再发布')
        return
      }
      if (!this.form.orderId) {
        this.$message.error('订单ID不存在，无法发布')
        return
      }
      if (!this.currentUserNick) {
        this.$message.error('未获取到用户信息，无法发布')
        return
      }

      try {
        await addFollow({
          orderId: this.form.orderId,
          orderFollowContent: this.inputValue,
          createBy: this.currentUserNick // 记录发布人
        })
        this.$message.success('发布成功')
        this.inputValue = ''
        this.getList() // 刷新当前订单的跟进记录
      } catch (error) {
        console.error('发布失败:', error)
        this.$message.error('发布失败，请重试')
      }
    },

    /** 权限检查方法 */
    hasPermission(permission) {
      return true // 实际项目替换为真实权限判断
    },

    /** 返回按钮操作 */
    handleBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
/* 样式保持不变 */
.timeline-card {
  display: flex;
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #ebeef5;
}

.item-avatar {
  margin-right: 10px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 30px;
}

.name {
  font-weight: bold;
}

.content-desc {
  margin-top: 5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

::v-deep .el-timeline-item__content {
  margin-top: -16px;
}

/* 关键样式：固定高度 + 垂直滚动 */
::v-deep .el-textarea__inner {
  height: 100px !important;
  /* 固定输入框高度（根据需要调整） */
  overflow-y: auto !important;
  /* 内容超出时显示垂直滚动条 */
  line-height: 1.5;
  /* 优化文字行高，避免拥挤 */
  padding-top: 10px;
  /* 调整内边距，使前缀图标对齐 */
}

/* 隐藏文本域默认的底部计数器（可选） */
::v-deep .el-textarea__count {
  display: none;
}

.custom-input-container {
  margin-right: 40px;
  /* 右侧间距 */
}
/* 滚动容器样式*/
.scroll-container {
  padding: 0 20px;
  /* 可根据页面布局调整高度，确保内容超出时可滚动 */
}

/* 加载指示器样式*/
.loading-indicator {
  text-align: center;
  padding: 20px 0;
  color: #409EFF;
}

/* 没有更多数据的样式 */
.no-more {
  text-align: center;
  padding: 15px 0;
  color: #909399;
  font-size: 14px;
}

</style>
